<template>
	<div>
		<top-nav bgColor="white" title="新增授权单"  btnName="保存"  :rightShow="true" returnPath="上一级" rightPath="addBills" @fatherDo="saveAdd"></top-nav>
		<section style="height: 3rem;"></section>
		<section style="text-align: left;width: 100%;height: 23rem;padding: 0 1.5rem;position: relative;border-bottom: 1px solid gainsboro;">

			<section class="title">
				<label class="left-Grant">物料名称：</label>
				<span style="flex: 7;text-align: left;">{{SalesItem.Name}}</span>
			</section>
			<section  class="title">
				<label class="left-Grant">物料编码：</label>
				<span style="flex: 7;text-align: left;">{{SalesItem.Number}}</span>
			</section>
						<!--<section class="title">
				<label style="flex: 2;">物料余量：</label>
				<span style="flex: 7;text-align: left;">{{SalesItem.Balance}}</span>
			</section>-->
			<section class="input-add">
				<label class="left-Grant">车牌号：</label>
				<mu-text-field class="right-mu-input"  underlineFocusClass="borderClassFocus"    hintText="请输入车牌号" v-model="FCarNo" fullWidth v-on:input ="isVehicleNumber()" />
			</section>
			<!--<section class="input-add">
				<label class="left-label">集装箱号：</label>
				<mu-text-field class="right-mu-input" style="flex: 8;" underlineFocusClass="borderClassFocus"    hintText="请输入集装箱号" v-model="containerNnumber" fullWidth />
			</section>
			<section class="input-add">
				<label class="left-label" >电话号码：</label>
				<mu-text-field class="right-mu-input" style="flex: 8;" underlineFocusClass="borderClassFocus"    hintText="请输入11位电话号码" v-model="phoneNnumber" fullWidth  />
			</section>-->
			<section class="input-add">
				<label class="left-Grant" >预装量：</label>
				<mu-text-field class="right-mu-input" underlineFocusClass="borderClassFocus"    hintText="请输入预装量" v-model="preload"  type="number" fullWidth  v-on:input = "ispreload()" />
				<!--<span style="flex: 7;text-align: left;">{{preloadsum}}</span>-->


			</section>	
			
			
			<span class="choiceBtn" @click="dialogAccount=true">增加账户</span>
		</section>	
		
			
		
<!--				<section style="height: 5rem;"></section>	-->

			
		
		<section style="text-align: left;width: 100%;padding: 0 1.5rem;position: relative;top: 1.5rem;">
			<span >账户</span>
			<section class="show-sec" v-for="(item,index) in accountResultList" >
			<span>编号：{{item.BillNo}} </span>
    		 <span>余额：{{item.BalAmt}}</span>
    		<span>单价：{{item.Price}}</span>
    		<span>余量：{{item.BalQty}}</span>
    		<label style="flex: 2;text-align: left;text-indent: 0.6rem;" >暂扣量：{{item.preload}}</label>	
    			<!--<section class="show-sec-input" >
    				

    				<!--<mu-text-field style="flex: 7.5;margin-top: 0.5rem;" underlineFocusClass="borderClassFocus"    hintText="请输入预装量" v-model="item.preload"  type="number" v-on:input="ispreload(item)" />
    				<span>{{item.preloadMsg}}</span>
    			</section>-->
    		</section>

	    </section>
	    <section style="height: 3rem; margin-bottom: 3rem;"></section>
		
		<mu-dialog :open="dialog" title="请选择一个物料" @close="close" >
		    <section class="table-title" >
		    	<span>编码</span>
		    	<span>名称</span>
		    </section>
		    <section v-for="(item,index) in SalesItemList"
		    	 @click="getSalesAccountListByItemId(item,index)" 
		    	 class="table-tr" 
		    	 :class="tableIndex==index?'choice-table-tr':''">
		    	<span >{{item.Number}}</span>
		    	<span >{{item.Name}}</span>
		    </section>
	    </mu-dialog>
	    
	    <mu-dialog :open="dialogAccount" title="请选择一个账户">
	    	<section class="table-title" >
		    	<span>编号</span>
		    	<span>余量</span>
		    </section>
		    <section  v-for="(item,index) in accountList"  
				@click="moveEle(index)"
		    	 class="table-tr" 
		    	 :class="tableIndex==index?'choice-table-tr':''">
		    	<span >{{item.BillNo}}</span>
		    	<span >{{item.Balance}}</span>
		    </section>
	    	
	    	
		    <mu-flat-button slot="actions" @click="closeAccount('cancel')" primary label="取消"/>
<!--    		<mu-flat-button slot="actions" primary @click="closeAccount('sure')" label="增加"/>-->
		</mu-dialog>
		
		   <mu-dialog :open="dialogAccountFirst" title="请选择一个账户">
	    	<section class="table-title" >
		    	<span>编号</span>
		    	<span>余量</span>
		    </section>
		    <section v-for="(item,index) in accountListFirst"
		    	 @click="moveEleFirst(item,index)"
		    	 class="table-tr" 
		    	 :class="tableIndex==index?'choice-table-tr':''">
		    	<span >{{item.BillNo}}</span>
		    	<span >{{item.Balance}}</span>
		    </section>
	    	
	    	
		    <mu-flat-button slot="actions" @click="closeAccount('cancel')" primary label="取消"/>
<!--    		<mu-flat-button slot="actions" primary @click="closeAccount('sure')" label="增加"/>-->
		</mu-dialog>
		
		
		<mu-dialog :open="isPop" title="提示" @close="closeSave">
		         请确认信息是否准确, 是否保存?
		    <mu-flat-button slot="actions" @click="closeSave('cancel')" primary label="取消"/>
		    <mu-flat-button slot="actions" primary @click="closeSave('sure')" label="确定"/>
		</mu-dialog>
		
		
	</div>
</template>

<script>
	import TopNav from '@/components/nav/topNav.vue'
	export default{
		components: {
		      TopNav,
		},
		data(){
			return{
				dialog:true,//物料弹出层
				dialogAccount:false,//账户弹出层
				dialogAccountFirst:true,//第一次选择账户弹出层
				FCarNo:'',//车牌号
				isFcarNo:false,//车牌号验证
				express:/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
				isCarNomsg:'',
				organizeid:null,
				guid:[],
				containerNnumber:'',
				phoneNnumber:'',
				isphoneNnumber:false,//验手机号证
				phoneExpress:/^1[3,4,5,7,8]\d{9}$/,
				isPhonemsg:'',
				preload:'',
				accountFirstId:null,
				accountListFirst:[],
				accountList:[],
				accountResultList:[],
				choiceIndex:-1,
				showChoice:{},
				choiceListJson:{},
				showList:false,
				SalesItemList:[],
				SalesItem:{
					Number:0,
					Name:'',
					Balance:0
				},
				preload:0,
				tableIndex:null,
				BillTemp:null,
				isPop:false
			}
		},
		mounted(){
//			this.getSalesItem()
			this.getAllOrder()
			this.getBillTemp()
		},
		methods:{
			ispreload(){
				let preloadsum=this.preload;
				for(let i=0;i<this.accountResultList.length;i++)
				{
					if(preloadsum>this.accountResultList[i].BalQty){
						this.accountResultList[i].preload=this.accountResultList[i].BalQty
						preloadsum=preloadsum-this.accountResultList[i].BalQty
						console.info(preloadsum)
					}else{
						this.accountResultList[i].preload=preloadsum
				}
				}
			},
			isVehicleNumber(){
			this.isFcarNo=false
			if (this.FCarNo.length == 7){
        	this.isFcarNo = this.express.test(this.FCarNo);
        	this.isCarNomsg='车牌号格式正确'
     		}else{
     			this.isCarNomsg='请输入正确的车牌号'
     		}
     		
		},
		isPhoneNumber(){
			this.isphoneNnumber=false
			if (this.phoneNnumber.length == 11){
        	this.isphoneNnumber = this.phoneExpress.test(this.phoneNnumber);
        	this.isPhonemsg='手机格式正确'
     		}else{
     			this.isPhonemsg='请输入正确的手机号'
     		}
     		
		},
		close(){
			this.dialog=false
		},
		closeSave(val){
			if(val=='sure'){
				this.addTask()
			}
			this.isPop=false
		},
		closeAccount(val){
//				if(val=='sure'){
//					this.showChoice=this.choiceListJson
//					this.showList=true
//				}else{
//					this.showChoice={}
//				}
				console.info(this.showChoice)
				this.dialogAccount=false
				this.dialog=false
				this.dialogAccountFirst=false
				
			},
			choiceList(val,data){
				this.choiceListJson=val
				this.choiceIndex=data
				console.info(val)
			},
			getSalesItem(){
				let that=this
				that.axios.post('/hongchang/getSalesItem',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
				}).then(function(response){
					console.info(response.data.data)
					that.SalesItemList=response.data.data.list
				}).catch(function(error){
					
				})
			},
			getAllOrder(){
				let that=this
				that.axios.post('/hongchang/getAllOrder',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'currentpage':1
				}).then(function(response){
					console.info(response.data.data)
					that.accountListFirst=response.data.data.list
				}).catch(function(error){
					
				})
			},
			getSalesAccountListByItemId(data,Index){
				this.tableIndex=Index
				this.SalesItem=data
				let that=this
				that.axios.post('/hongchang/getSalesAccountListByItemId',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'ItemID':data.ID,
					'organizeId':that.organizeid 
				}).then(function(response){
					console.info(response.data.data)
					that.accountList=response.data.data.list
					that.dialogAccount=false
					that.dialog=false
						for(let j=0;j<that.accountList.length;j++)
						{
							if(that.accountFirstId==that.accountList[j].ID)
							{
								that.accountResultList.push(that.accountList[j])
								that.accountList.splice(j,1)	
							}
						}

				}).catch(function(error){
					console.info(error)
				})
			},
			moveEle(data){
		  		this.accountResultList.push(this.accountList[data])
		  		this.accountList.splice(data,1)
		  		this.dialogAccount=false
				this.dialog=false
		  		console.info(this.accountResultList)
		  		console.info(this.accountList)
	  		},
	  		moveEleFirst(data,index){
//		  		this.accountResultList.push(this.accountListFirst[index])
////		  		this.accountListFirst.splice(index,1)
				this.accountFirstId=this.accountListFirst[index].ID
				this.organizeid=this.accountListFirst[index].OrganizeID
		  		this.dialogAccount=false
		  		this.dialogAccountFirst=false
				this.dialog=true
		  		this.getSalesItemByAccountID(data.ID)
	  		},
	  		getSalesItemByAccountID(id){
	  			let that=this
				that.axios.post('/hongchang/getSalesItemByAccountID',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'fid':id,
					'organizeId':that.organizeid 
				}).then(function(response){
					console.info(response.data.data)
					that.SalesItemList=response.data.data.list
				}).catch(function(error){
					
				})
	  		},
	  		saveAdd(){
	  			let that=this
//	  			this.$message({type: 'success',message: '保存成功!',duration:1500})
				let preloadsum=0
				for(let i=0;i<this.accountResultList.length;i++)
				{
				preloadsum=preloadsum+parseFloat(this.accountResultList[i].preload)
				console.info(preloadsum)
				}
				if(preloadsum<parseFloat(this.preload)){
					this.$message({type: 'warning',message: '账户内余量不足!',duration:1500})
				}else if(!this.isFcarNo){
					this.$message({type: 'warning',message: '车牌号格式不正确',duration:1500})
				
//				else if(!this.isphoneNnumber){
//					this.$message({type: 'warning',message: '手机号格式不正确',duration:1500})
				}else
				{
					this.isPop=true
					console.info(preloadsum)
//					this.$confirm('请确认信息是否准确, 是否保存?', '提示', {
//        			confirmButtonText: '确定',
//        			cancelButtonText: '取消',
//        			center:true,
//        			type: 'warning'
//      			}).then(() => {
//      			that.addTask()
//					
//      			}).catch(() => {
//      				
//					});
				}
	  		},
	  		addTask(){
			let that=this
				that.axios.post('/hongchang/addTask',{
				'factoryId':localStorage.factoryId,
				'uid':localStorage.uid,
				'organizeId':that.organizeid,
//				'billNo':that.BillTemp.Data.Data.billno,
				'guid':that.guid[0],
				'FCarNo':that.FCarNo,
				'itemId':that.SalesItem.ID,
				'itemNumber':that.SalesItem.Number,
				'itemName':that.SalesItem.Name,
//				containerNnumber:that.containerNnumber,
				'FCustomID':that.accountResultList[0].CustomID,
				'FCustomName':that.accountResultList[0].CustomName,
				'FCustomID':that.accountResultList[0].CustomNumber,
				'phoneNnumber':that.phoneNnumber,
				'preload':that.preload,
				'deliveryMode':that.deliveryMode,
				'orderNumber':that.orderNumber,
				'balance':that.balance,
				'accountResultList':that.accountResultList,
				'FEmpRht':that.FEmpRht
				}).then(function(response){
					if(response.data.code==0){
						that.$message({type: 'success',message: '保存成功!',duration:1500})
          				that.$router.replace({path:'hongchangLaddingBills'})
					}else{
						that.$message({type: 'info',message: '保存失败',duration:1500});
					}
				}).catch(function(error){
					that.$message({type: 'info',message: '保存失败',duration:1500});
				})

		},
		getBillTemp(){
				let that=this
				that.axios.post('/hongchang/getNumber',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'organizeId':localStorage.organizeId
				}).then(function(response){
					console.info(response.data.data)
					that.guid=response.data.data
				}).catch(function(error){
					
				})
		}
		}
	}
</script>

<style scoped>
	.left-Grant{
		flex: 2;
	}
	.right-mu-input{
		flex: 10;
		margin-top: 0.6rem;
	}
	.input-add{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
		flex-direction: row;
	}
	.title{
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	
	.choiceBtn{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 4.6rem;
		background-color: #0090FF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.6rem;
		color: white;
		font-size: 0.7rem;
		border-radius: 3px;
	}
	.choice-list{
		width: 100%;
		height: 100%;
		margin-top: 0.6rem;
	}
	.choice-sec{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec{
		display: flex;
		flex-direction: column;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec span{
		text-align:left;
		height:2rem;
		text-indent: 0.6rem;
		line-height: 2rem;
	}
	.choice-bg{
		background: #e5e5e5;
	}
	.choice-sec span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 0.6rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		/*border: 1px solid #e5e5e5;*/
		margin-top: 1.6rem;
	}
	.show-list span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-sec-input{
		height: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
		margin-bottom: 0.6rem;
		padding-right: 0.6rem;
	}
	.height-show{
		height: 2rem;
		line-height: 2rem;
	}
	.mu-text-field{
		font-size: 0.8rem!important;
	}
	.table-title{
		color: rgb(0, 144, 255);
		font-size: 0.9rem;
	}
	.table-title,.table-tr{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 2.4rem;
		border-bottom: 1px solid rgba(234,234,234,.8);
		
	}
	.table-tr{
		font-size: 0.8rem;
	}
	.choice-table-tr{
		background-color: rgba(234,234,234,.5);
	}
	.table-title span:nth-child(1),.table-tr span:nth-child(1){
		flex: 1.5;
	}
	.table-title span:nth-child(2),.table-tr span:nth-child(2){
		flex: 1;
	}
	.table-title span:nth-child(3),.table-tr span:nth-child(3){
		flex: 1;
	}
</style>